<template>
  <div class="main-div">
    <div class="main-search-div">
      <el-form ref="searchRef"
               :model="searchItem"
               status-icon
               inline>
        <el-form-item label="操作描述" prop="description" class="main-search-item-3">
          <el-input v-model="searchItem.description" type="text"/>
        </el-form-item>
        <el-form-item label="操作用户" prop="userId" class="main-search-item-3">
          <common-user-select v-model="searchItem.userId"></common-user-select>
        </el-form-item>
        <el-form-item label="日志类型" prop="logType" class="main-search-item-3">
          <common-dict-select v-model="searchItem.logType" :dict-key="SYSTEM_LOG_TYPE"></common-dict-select>
        </el-form-item>
        <el-form-item label="所属模块" prop="moduleId" class="main-search-item-3">
          <common-dict-select v-model="searchItem.moduleId" :dict-key="SYSTEM_MODULE"></common-dict-select>
        </el-form-item>
        <el-form-item label="操作时间" prop="timeRange" class="main-search-item-3">
          <el-date-picker
              v-model="searchItem.timeRange"
              type="datetimerange"
              range-separator="至"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">查询</el-button>
          <el-button @click="reset(searchRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-button-div">
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="main-table-div">
      <common-page-table
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          :show-border="true"
          :need-one-select="true"
          :show-no="true"
          :loading="tableLoading"
          :show-action="true"
          :action-config="actionConfig"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @handle-current-change="handleTableCurrentChange"
      >
        <template #action="{row}">
          <el-button type="primary" size="small" round @click="viewFn(row)">详情</el-button>
        </template>
      </common-page-table>
    </div>
  </div>

  <log-view-dialog
      :show-dialog="logDialogItem.showDialog"
      :dialog-title="logDialogItem.title"
      :dialog-type="logDialogItem.dialogType"
      :relation-id="logDialogItem.relationId"
      @dialog-close="logDialogItem.showDialog = false"
  >
  </log-view-dialog>
</template>

<script setup lang="ts">
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {SYSTEM_LOG_TYPE, SYSTEM_MODULE} from "@/constants/dict-constants.ts";
import {onMounted, reactive, ref} from "vue";
import CommonUserSelect from "@/components/common/CommonUserSelect.vue";
import type {FormInstance} from "element-plus";
import CommonPageTable from "@/components/common/CommonPageTable.vue";
import LogViewDialog from "@/components/manager/log/LogViewDialog.vue";
import {DIALOG_VIEW} from "@/constants/common-constant.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import {getListPageReq} from "@/api/admin/log.ts";

interface SearchItem {
  description: string,
  userId: string,
  logType: string,
  moduleId: string,
  timeRange: any,
  paramName: string
}
const searchItem: SearchItem = reactive({
  description: '',
  userId: '',
  logType: '',
  moduleId: '',
  timeRange: [],
  paramName: ''
})

interface LogDialogItem {
  showDialog: boolean,
  title: string,
  relationId: string,
  dialogType: string
}
const logDialogItem: LogDialogItem = reactive({
  showDialog: false,
  title: '',
  relationId: '',
  dialogType: ''
})

const searchRef = ref<FormInstance>()

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const searchLoading = ref(false)
const search = async () => {
  searchList().then();
}

const searchList = async () => {
  searchLoading.value = true

  const timeRange = searchItem.timeRange;
  let createStartTime = ''
  let createEndTime = ''
  if (timeRange && timeRange.length > 0) {
    createStartTime = timeRange[0]
    createEndTime = timeRange[1]
  }
  const params = {
    description: searchItem.description,
    userId: searchItem.userId,
    logType: searchItem.logType,
    systemModule: searchItem.moduleId,
    createStartTime: createStartTime,
    createEndTime: createEndTime,
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize
  }
  const res: any = await getListPageReq(params)
  searchLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    tableData.value = res.data.rows;
    pagination.total = res.data.total
  }
  searchLoading.value = false
}

const tableData = ref<any[]>([])
const columns = [
  {prop: 'description', label: '操作描述', width: 'auto', fixed: 'left'},
  {prop: 'createTimeFormat', label: '操作时间', width: 'auto'},
  {prop: 'userName', label: '操作用户', width: 'auto'},
  {prop: 'systemModuleLabel', label: '所属模块', width: 'auto'},
  {prop: 'duration', label: '耗时', width: 'auto'},
  {prop: 'logTypeLabel', label: '操作类型', width: 'auto'},
  {prop: 'traceId', label: '追踪吗', width: 'auto'}
]
const currentPage = ref<number>(1)
const pageSize = ref<number>(20)
const total = ref<number>(0)
const pagination = reactive({
  currentPage: currentPage.value,
  pageSize: pageSize.value,
  total: total.value
})
const tableLoading = ref<boolean>(false)
const actionConfig = {
  prop: 'action',
  label: '操作',
  width: 'auto',
}

const currentRow = ref()
const sizeChange = (val: number) => {
  pageSize.value = val;
  pagination.pageSize = val;

  searchList().then();
}

const currentChange = (val: number) => {
  currentPage.value = val;
  pagination.currentPage = val;

  searchList().then();
}
const handleTableCurrentChange = (row: any) => {
  currentRow.value = row
}

const viewFn = (row: any) => {
  logDialogItem.showDialog = true
  logDialogItem.title = '日志详情'
  logDialogItem.relationId = row.id
  logDialogItem.dialogType = DIALOG_VIEW
}

onMounted(async () => {
  searchList().then()
})

</script>

<style scoped>

</style>